/**
 * =======================================================================
 * List Page Styles - 简化列表页面样式
 * =======================================================================
 *
 * 这个文件包含了列表页面的核心样式，是其他样式文件的入口，包括：
 * - 样式文件导入
 * - 全局变量定义
 * - 核心工具类
 *
 * @version 1.0.0
 * @author Anypay Team
 * =======================================================================
 */

/* =======================================================================
   1. 样式文件导入
   ======================================================================= */

/**
 * 导入所有相关样式文件
 * 这样只需要引入这一个文件即可获得完整的列表页面样式
 */
@import './page-layout.css';
@import './page-header.css';
@import './search-form.css';
@import './data-table.css';
@import './action-buttons.css';

/* =======================================================================
   2. 全局变量定义
   ======================================================================= */

/**
 * Apple Design System 颜色变量
 */
:root {
  /* 主要颜色 */
  --anypay-primary-color: #007aff;
  --anypay-primary-hover: #005ce6;

  /* 文字颜色 */
  --anypay-text-primary: #1d1d1f;
  --anypay-text-secondary: #424245;
  --anypay-text-tertiary: #666;
  --anypay-text-placeholder: #86868b;

  /* 背景颜色 */
  --anypay-bg-primary: #ffffff;
  --anypay-bg-secondary: #fafafa;
  --anypay-bg-tertiary: #f9f9f9;

  /* 边框颜色 */
  --anypay-border-light: rgba(0, 0, 0, 0.04);
  --anypay-border-medium: rgba(0, 0, 0, 0.06);
  --anypay-border-dark: rgba(0, 0, 0, 0.1);

  /* 阴影 */
  --anypay-shadow-light: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.02);
  --anypay-shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.08);

  /* 圆角 */
  --anypay-radius-small: 6px;
  --anypay-radius-medium: 8px;
  --anypay-radius-large: 12px;
}

/* =======================================================================
   3. 核心工具类
   ======================================================================= */

/**
 * 文字颜色工具类
 */
.text-primary {
  color: var(--anypay-text-primary);
}

.text-secondary {
  color: var(--anypay-text-secondary);
}

.text-tertiary {
  color: var(--anypay-text-tertiary);
}

/**
 * 间距工具类
 */
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }

.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }